<template>
  <view class="player-header">
    <view class="left-group">
      <span @tap="handleBack" class="iconfont icon-a-1"></span>
      <span @tap="handleHome" class="iconfont icon-shouye"></span>
    </view>
    <view class="right-placeholder"></view>
  </view>
</template>

<script>
export default {
  name: 'UniMusicHead',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleBack() {
      uni.navigateBack();
    },
    handleHome() {
      uni.reLaunch({
        url: '/pages/index/index'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
  width: 100%;
  padding: 0 30rpx;
  background-color: transparent;
  z-index: 1000;
  box-sizing: border-box;

  .left-group {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50rpx;
    padding: 10rpx 20rpx;
    width: 180rpx;
    justify-content: center;
    
    .iconfont {
      font-size: 40rpx;
      color: white;
      margin: 0 10rpx;
    }
  }
  
  .title-center {
    flex: 1;
    text-align: center;
    color: white;
    font-size: 34rpx;
    font-weight: bold;
  }

  .right-placeholder {
    width: 180rpx; /* 保持与左侧相同宽度，使标题居中 */
  }
}
</style>